<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="add">点我n加1</button>
        <button @click="bay">点我销毁事件</button>
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
        new Vue({
            el:"#root",
        //     template:`<div>
        //                  <h2>当前的n值是:{{n}}</h2>
        //              <button @click="add">点我n加1</button>`
        // </div>,//当容器中没有模板时，使用template中的值进行编译,但是这里面只能有一个根节点
            data:{
                n:1
            },
            methods: {
                add(){
                    this.n++;
                },
                bay(){
                    this.$destroy()
                }
            },
            // 挂载流程
            beforeCreate() {
                console.log("beforeCreate")
                console.log(this)
                // debugger;//卡断点，调试使用的
                //这里可以看到还不能通过vm访问data中的数据、methods中的方法，输出的this中的数据大部分都是undefined，(数据代理还未开始)
            },
            created() {
                console.log("created")
                console.log(this)
                // debugger;
                //这里可以通过vm访问到data中的数据、methods中配置的方法(数据监测、数据代理已经完成)
            },
            beforeMount() {
                console.log("beforeMount")
                // console.log(this)
                // debugger;
                // 这里Vue已经解析模板，生成了虚拟DOM(在内存中)，页面还不能显示解析好的内容
                // 此时页面呈现的是未经Vue编译的DOM结构，所有对真实DOM的操作都不奏效
            },
            mounted() {//重要
                console.log("mounted")
                // console.log(this)
                // debugger;
                // 已经将内存中的虚拟DOM转为真实DOM插入页面
                // 此时页面成呈现的是经过Vue编译的DOM
                // 尽管对DOM的操作均有效(但是尽量避免)，一般在这里进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作

            },
            // 更新流程
            beforeUpdate() {
                console.log("beforeUpdate")
                // console.log(this.n)
                // debugger;
                // 此时数据已经更新，但是页面还未更新(未变)，即：页面与数据尚未同步
            },
            updated() {
                console.log("updated")
                console.log(this.n)
                // 根据新数据，生成新的虚拟DOM,随后生成新的虚拟DOM进行比较，最终完成页面更新
                // 此时数据跟页面都是新的，即：页面与数据保持同步
            },
            // 销毁流程
            beforeDestroy() {//(重要)
                console.log("beforeDestroy")
                console.log(this.n)//还能输出data,methods等
                // vm中所有的data、methods、指令等等都处于可用状态，马上执行销毁过程，关闭定时器，取消订阅信息，解绑自定义事件
            },
            destroyed() {
                console.log("destroyed")
            },
        })

    </script>
</body>
</html>